import React, { useState } from "react";
import { Button, Form, Input } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { connect } from "react-redux";
import { useHistory } from "react-router-dom";
import "./index.scss";
import { SET_USER } from "store/constants";

const { useForm } = Form;
const PhoneReg = /^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8,6]|8[0-9]|9[1,8,9])\d{8}$/;
interface ILoginProps {
    setUser: (payload: any) => void;
}
const Login: React.FC<ILoginProps> = (props) => {
    const [form] = useForm();
    const [canSendCode, setCanSendCode] = useState<boolean>(false)
    const history = useHistory();
    const login = (values: any) => {
        // 执行登录流程
        console.log(values);
        localStorage.setItem("token", JSON.stringify(values))
        props.setUser(`用户${values?.phone?.slice(-4)}`);
        history.push("/")
    }
    return <div className="login-wrapper">
        <div className="login-desc">
            <h1>Voyage-LEGO</h1>
            <h5>一款极简的H5建站工具</h5>
            <p className="author">&copy; Design By MrChensir</p>
        </div>
        <div className="login-form-wrapper">
            <div className="welcome-text">
                <h3>欢迎回来</h3>
                <p>使用手机号和验证码登录到Voyage_LEGO</p>
            </div>
            <Form className="login-form" form={form} onFinish={login}>
                <Form.Item name="phone"
                    rules={[
                        {
                            required: true,
                            message: "手机号不能为空"
                        }
                    ]}
                >
                    <Input 
                        style={{width: 350, height: 40, borderRadius: 20, backgroundColor: "#ebf2ff", borderColor: "#ebf2ff"}} 
                        placeholder="手机号码" 
                        suffix={<UserOutlined style={{fontSize: 17, color: "#aaa"}} />}
                        onChange={(e) => {
                            if(PhoneReg.test(e.target.value)){
                                setCanSendCode(true);
                                return;
                            }
                            setCanSendCode(false)
                        }}
                    />
                </Form.Item>
                <Form.Item name="code"
                    rules={[
                        {
                            required: true,
                            message: "验证码不能为空"
                        }
                    ]}
                >
                    <Input 
                        style={{width: 350, height: 40, borderRadius: 20, backgroundColor: "#ebf2ff", borderColor: "#ebf2ff"}} 
                        placeholder="短信验证码" 
                        suffix={<LockOutlined style={{fontSize: 17, color: "#aaa"}} />}
                    />
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit">登录</Button>
                    <Button type="default" disabled={!canSendCode}>获取验证码</Button>
                </Form.Item>
            </Form>
        </div>
    </div>
}

export default connect(null, (dispatch) => {
    return {
        setUser: (payload: any) => dispatch({type: SET_USER, payload})
    }
})(Login);